<template>
  <div>
    <div class="form-wrap">
      <div class="input-field">
        <span class="label mark">+86</span>
        <span class="input-block">中国</span>
      </div>
      <div class="input-field">
        <span class="label">手机号</span>
        <input
          v-model="form.phone"
          class="input-block"
          type="number"
          placeholder="填写手机号"
          placeholder-class="placeholder-part"
          maxlength="11"
        />
      </div>
      <button class="btn-color-blue" @click="handleNext">下一步</button>

      <a href="/pages/open-shop/store-login/main" class="forget">已有账号？去登录</a>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import {} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: { phone: '' }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.form = { phone: '' }
  },
  methods: {
    handleNext () {
      if (this.form.phone) {
        if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
          this.$toast('手机号码格式错误')
        } else {
          this.$router.push(
            '/pages/open-shop/store-register/step2/main?phone=' +
              this.form.phone
          )
        }
      } else {
        this.$toast('请填写手机号')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .btn-color-blue {
    margin-top: 50px;
  }
  > .forget {
    color: $blue;
    font-size: 14px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
